<template>
  <view class="notification">
    <!-- 通知设置 -->
    <view class="section-card">
      <view class="section-title">通知设置</view>
      <view class="setting-list">
        <view class="setting-item">
          <view class="setting-info">
            <text class="name">系统通知</text>
            <text class="desc">接收系统更新、维护等通知</text>
          </view>
          <switch 
            :checked="settings.system"
            @change="e => toggleSetting('system', e.detail.value)"
            color="#67AFAB"
          />
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <text class="name">预约提醒</text>
            <text class="desc">接收挂号、疫苗等预约提醒</text>
          </view>
          <switch 
            :checked="settings.appointment"
            @change="e => toggleSetting('appointment', e.detail.value)"
            color="#67AFAB"
          />
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <text class="name">就医提醒</text>
            <text class="desc">接收就医、取药等提醒</text>
          </view>
          <switch 
            :checked="settings.medical"
            @change="e => toggleSetting('medical', e.detail.value)"
            color="#67AFAB"
          />
        </view>
        <view class="setting-item">
          <view class="setting-info">
            <text class="name">缴费提醒</text>
            <text class="desc">接收待缴费、退款等提醒</text>
          </view>
          <switch 
            :checked="settings.payment"
            @change="e => toggleSetting('payment', e.detail.value)"
            color="#67AFAB"
          />
        </view>
      </view>
    </view>
    
    <!-- 消息列表 -->
    <view class="section-card">
      <view class="section-header">
        <text class="title">最近消息</text>
        <text class="clear-btn" @tap="clearMessages">清空消息</text>
      </view>
      <view class="message-list">
        <view 
          class="message-item"
          v-for="(message, index) in messages"
          :key="index"
          :class="{ unread: !message.read }"
          @tap="viewMessage(message)"
        >
          <view class="message-icon" :class="message.type">
            <text class="iconfont" :class="getIconClass(message.type)"></text>
          </view>
          <view class="message-content">
            <view class="message-header">
              <text class="title">{{ message.title }}</text>
              <text class="time">{{ message.time }}</text>
            </view>
            <text class="desc">{{ message.content }}</text>
          </view>
          <text class="unread-dot" v-if="!message.read"></text>
        </view>
      </view>
    </view>
    
    <!-- 通知方式设置 -->
    <view class="section-card">
      <view class="section-title">通知方式</view>
      <view class="notify-list">
        <view class="notify-item">
          <view class="notify-info">
            <text class="name">应用内通知</text>
            <text class="desc">在应用内接收消息提醒</text>
          </view>
          <switch 
            :checked="notifyMethods.app"
            @change="e => toggleNotifyMethod('app', e.detail.value)"
            color="#67AFAB"
          />
        </view>
        <view class="notify-item">
          <view class="notify-info">
            <text class="name">短信通知</text>
            <text class="desc">通过短信接收重要提醒</text>
          </view>
          <switch 
            :checked="notifyMethods.sms"
            @change="e => toggleNotifyMethod('sms', e.detail.value)"
            color="#67AFAB"
          />
        </view>
        <view class="notify-item">
          <view class="notify-info">
            <text class="name">微信服务通知</text>
            <text class="desc">通过微信接收服务通知</text>
          </view>
          <switch 
            :checked="notifyMethods.wechat"
            @change="e => toggleNotifyMethod('wechat', e.detail.value)"
            color="#67AFAB"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 通知设置
const settings = ref({
  system: true,
  appointment: true,
  medical: true,
  payment: true
})

// 通知方式
const notifyMethods = ref({
  app: true,
  sms: true,
  wechat: true
})

// 消息列表
const messages = ref([
  {
    id: 1,
    type: 'appointment',
    title: '预约提醒',
    content: '您预约的明天上午9:30心内科张医生的门诊即将开始',
    time: '10分钟前',
    read: false
  },
  {
    id: 2,
    type: 'payment',
    title: '缴费提醒',
    content: '您有一笔￥360.00的待缴费订单，请及时处理',
    time: '1小时前',
    read: false
  },
  {
    id: 3,
    type: 'system',
    title: '系统通知',
    content: '系统将于今晚23:00-次日凌晨2:00进行维护升级',
    time: '2小时前',
    read: true
  },
  {
    id: 4,
    type: 'medical',
    title: '取药提醒',
    content: '您的处方药已准备就绪，请到3号窗口取药',
    time: '昨天',
    read: true
  }
])

// 切换通知设置
const toggleSetting = (key, value) => {
  settings.value[key] = value
  uni.showToast({
    title: value ? '已开启' : '已关闭',
    icon: 'success'
  })
}

// 切换通知方式
const toggleNotifyMethod = (key, value) => {
  notifyMethods.value[key] = value
  uni.showToast({
    title: value ? '已开启' : '已关闭',
    icon: 'success'
  })
}

// 获取图标类名
const getIconClass = (type) => {
  const icons = {
    system: 'icon-system',
    appointment: 'icon-calendar',
    medical: 'icon-medical',
    payment: 'icon-wallet'
  }
  return icons[type]
}

// 查看消息
const viewMessage = (message) => {
  // 标记为已读
  message.read = true
  // 这里可以跳转到消息详情页
  console.log('查看消息:', message)
}

// 清空消息
const clearMessages = () => {
  uni.showModal({
    title: '提示',
    content: '确定要清空所有消息吗？',
    success: (res) => {
      if (res.confirm) {
        messages.value = []
        uni.showToast({
          title: '已清空',
          icon: 'success'
        })
      }
    }
  })
}
</script>

<style lang="scss">
.notification {
  min-height: 100vh;
  background: $bg-color;
  padding: 20rpx;
  
  .section-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .section-title {
      font-size: 32rpx;
      color: $text-primary;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
      }
      
      .clear-btn {
        font-size: 28rpx;
        color: $text-secondary;
        
        &:active {
          opacity: 0.8;
        }
      }
    }
    
    .setting-list,
    .notify-list {
      .setting-item,
      .notify-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;
        
        &:last-child {
          border-bottom: none;
        }
        
        .setting-info,
        .notify-info {
          flex: 1;
          margin-right: 20rpx;
          
          .name {
            font-size: 30rpx;
            color: $text-primary;
            margin-bottom: 4rpx;
            display: block;
          }
          
          .desc {
            font-size: 24rpx;
            color: $text-secondary;
          }
        }
      }
    }
    
    .message-list {
      .message-item {
        display: flex;
        align-items: flex-start;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;
        position: relative;
        
        &:last-child {
          border-bottom: none;
        }
        
        .message-icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: $radius-lg;
          margin-right: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          
          .iconfont {
            font-size: 40rpx;
            color: #fff;
          }
          
          &.system {
            background: linear-gradient(135deg, #36D1DC, #5B86E5);
          }
          
          &.appointment {
            background: linear-gradient(135deg, #FF9A9E, #FAD0C4);
          }
          
          &.medical {
            background: linear-gradient(135deg, #A8EDEA, #FED6E3);
          }
          
          &.payment {
            background: linear-gradient(135deg, #D4FC79, #96E6A1);
          }
        }
        
        .message-content {
          flex: 1;
          
          .message-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8rpx;
            
            .title {
              font-size: 30rpx;
              color: $text-primary;
              font-weight: bold;
            }
            
            .time {
              font-size: 24rpx;
              color: $text-secondary;
            }
          }
          
          .desc {
            font-size: 26rpx;
            color: $text-regular;
            line-height: 1.5;
          }
        }
        
        .unread-dot {
          position: absolute;
          right: 0;
          top: 20rpx;
          width: 16rpx;
          height: 16rpx;
          background: $danger;
          border-radius: 50%;
        }
        
        &.unread {
          .message-header .title {
            color: $primary-color;
          }
        }
        
        &:active {
          opacity: 0.8;
        }
      }
    }
  }
}
</style> 